<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background: #Ccc
        }
        #box{
            width: 550px;
            height: 550px;
            background: #fff;
            margin: 0 auto;
            padding-left: 50px;
        }
        input{
            margin-top: 20px;
        }
        button{
            margin: 10px 5px;
        }
    </style>
</head>
<body>
    <div id="box">
        账号：<input type="text" id="user"><span></span><br>
        昵称：<input type="text" id="name"><span></span><br>
        电子邮箱：<input type="text" id="mail"><span></span><br>
        身份证：<input type="text" id="ID"><span></span><br>
        手机号码：<input type="text" id="phone"><span></span><br>
        生日：<input type="text" id="birth"><span></span><br>
        密码：<input type="password" class="pass"><span></span><br>
        确认密码：<input type="password" class="word"><span></span><br>
        <input type="checkbox">十天内免登陆<br>
        <button id="btn1">确认</button><button id="btn2">清空</button>
    </div>
</body>
<script>
    var obox = document.getElementById('box');
    var ouser = document.getElementById('user');
    var oname = document.getElementById('name');
    var omail = document.getElementById('mail');
    var oID = document.getElementById('ID');
    var ophone = document.getElementById('phone');
    var obirth = document.getElementById('birth');
    var opass = document.querySelector('.pass');
    var oword = document.querySelector('.word');
    var btn1 = document.getElementById('btn1');
    var btn2 = document.getElementById('btn2');
    var sp = document.getElementsByTagName('span');
    var empty = document.getElementsByTagName('input');
    console.log(empty);
    
    ouser.onblur = function(){
        var reg = /^[a-zA-Z](\w|-){5,19}$/;
        if(this.value == ""){
            alert('账号不能为空')
            return
        }
        if(reg.test(this.value)){
            this.nextElementSibling.innerHTML = "验证成功";
        }else{
            this.nextElementSibling.innerHTML = "用户名规则：长度6-20 必须以字母开头 只能使用数字、字母、下划线、横杠";
        }
    }
    oname.onblur = function(){
        var reg = /^[\u4e00-\u9fa5]{3,6}$/
        if(reg.test(this.value)){
            this.nextElementSibling.innerHTML = "验证成功";
        }else{
            this.nextElementSibling.innerHTML = "昵称规则：昵称只能输入3-6个中文";
        }
    }
    omail.onblur = function(){
        var reg = /^[0-9a-zA-Z]{5,12}@(126|163|qq)\.(sina|cn|com|net)$/;
        if(reg.test(this.value)){
            this.nextElementSibling.innerHTML = "验证成功";
        }else{
            this.nextElementSibling.innerHTML = "邮箱的规则：数字大小写字母，5~12 @ 126|163|qq . sina|cn|qq|net";
        }
    }
    oID.onblur = function(){
        var reg = /^[1-9](\d{17}|\d{16}[xX])$/
        if(reg.test(this.value)){
            this.nextElementSibling.innerHTML = "验证成功";
        }else{
            this.nextElementSibling.innerHTML = "身份证无效";
        }
    }
    ophone.onblur = function(){
        var reg = /^1[3-9]\d{9}$/;
        if(reg.test(this.value)){
            this.nextElementSibling.innerHTML = "验证成功";
        }else{
            this.nextElementSibling.innerHTML = "手机号规则：11位 开头必须是 1,第二位必须是 3456789 还剩下 8-9位数字";
        }
    }
    obirth.onblur = function(){
        var reg = /^\d{4}(-|\/)?(0?[1-9]|1[0-2])\1(0?[1-9]|[1-2]\d|3[0-1])$/;
        if(reg.test(this.value)){
            this.nextElementSibling.innerHTML = "验证成功";
        }else{
            this.nextElementSibling.innerHTML = "生日填写不合规矩";
        }
    }
    opass.onblur = function(){
        var reg = /^\w{1,20}$/;
        if(reg.test(this.value)){
            this.nextElementSibling.innerHTML = "验证成功";
        }else{
            this.nextElementSibling.innerHTML = "密码规则：长度小于20 不能包含空格";
        }
    }
    oword.onblur = function(){
        if(this.value === opass.value){
            this.nextElementSibling.innerHTML = "验证成功";
        }else{
            this.nextElementSibling.innerHTML = "密码确认错误";
        }
    }
    
    btn1.onclick = function(){
        var flag = false;
        for(var i=0;i<sp.length;i++){
            if(sp[i].innerHTML != "验证成功"){
                alert('注册失败')
                break;
            }else if(sp[sp.length-1].innerHTML == '验证成功'){
                flag = true;
                
            }
        }
        if(flag == true){
            alert('注册成功')
        }
    }

    btn2.onclick = function(){
        for(var j=0;j<empty.length;j++){
            empty[j].value = '';
        }
        for(var k=0;k<sp.length;k++){
            sp[k].innerHTML = '';
        }
    }
</script>
</html>